<template>
  <div>
    <a-table :columns="columns" :data-source="songList" :loading="loading" :row-key="record => record.id" @change="handleChange" :pagination="false">
      <span class="control" slot="customAction" slot-scope="text, record, index"><a-icon type="play-circle" @click="addMusic(record)"/>  <a-icon type="star" />  <a-icon type="download" /></span>
    </a-table>
    <div style="text-align: right;margin-top: 10px">
        <a-pagination
        v-model="pageInfo.current"
        :page-size-options="['10', '20', '50']"
        :total="songIds.length"
        show-size-changer
        :page-size="pageInfo.pageSize"
        @change="handleChangePage"
        @showSizeChange="handleChangeSize"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>

  </div>
</template>

<script>
  import {_getSongDetail} from '@/api/playlist.js'
  import { msToTime } from '@/assets/utils/index.js'
  export default {
    name: 'musicList',
    props: {
      songIds: {
        type: Array
      }
    },
    data() {
      return {
        columns : [
          {
            dataIndex: 'rowNum',
            key: 'rowNum',
            customRender: (text,record,index) => `${(this.pageInfo.current - 1) * this.pageInfo.pageSize + index + 1} `,
            width: '60px'
          },
          {
            title: '操作',
            key: 'action',
            dataIndex: 'action',
            slots: { title: 'action' },
            scopedSlots: { customRender: 'customAction' },
            width: '120px'
          },
          {
            title: '音乐标题',
            key: 'name',
            dataIndex: 'name'
          },
          {
            title: '歌手',
            key: 'arName',
            dataIndex: 'arName'
          },
          {
            title: '专辑',
            key: 'alName',
            dataIndex: 'alName'
          },
          {
            title: '时长',
            key: 'dt',
            dataIndex: 'dt'
          }
        ],
        data : [],
        songListOriginData : [],
        loading: false,
        pageInfo: { current: 1, pageSize: 10 }
      }
    },
    computed: {
      // 格式化的歌曲列表数据
      songList(){
        return this.songListOriginData.map((item) => {
          return {
            id: item.id,
            name: item.name,
            arName: item.ar.map(item => item.name).toString(),
            alName: item.al.name,
            dt: msToTime(item.dt)
          }
        })
      },
      // 计算需要请求的歌曲ids
      getIds(){
        let left = (this.pageInfo.current - 1) * this.pageInfo.pageSize
        let right = left + this.pageInfo.pageSize - 1
        console.log(left,right)
        return this.songIds.slice(left, right).toString()
      }
    },
    mounted() {
      this.getSongList()
    },
    methods: {
     async getSongList(){
        const data = await _getSongDetail({ids: this.getIds})
        if(data.code != 200) return false
        this.songListOriginData = data.songs
      },
      // 表格改变事件
      handleChange(pagination, filters, sorter){
        this.pageInfo = pagination
      },
      // 每页显示数量改变
      handleChangeSize(current, size){
        this.pageInfo.current = current
        this.pageInfo.pageSize = size
        this.getSongList()
      },
      // 翻页事件
      handleChangePage(page, pagesize){
        this.getSongList()
      },
      // 播放  single / all
      addMusic(val){
        this.$emit('addMusic', val.id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .control{
    i{
      margin: 0 2px;
      cursor: pointer;
      color: #1890ff;
    }
  }
</style>
